<template>
  <div>
    <div :style="{height: toolbarHei +'px'}"></div>
    <nut-navbar title="商品管理" left-text="返回" left-show @click-back="clickLeft"></nut-navbar>
    <div style="display: flex;background: white;">
      <div style="flex:1;">
        <nut-searchbar
            @search="onSearch"
            @clear="onSearch"
            v-model="searchModel.searchTxt"
            placeholder="请输入搜索关键词"
        >
         <template #rightout>
           <div style="display:flex;">
             <div @click="onSearch">搜索</div>
             <div @click="add" style="margin-left:20px;">新增 </div>
           </div>
         </template>
        </nut-searchbar>
      </div>
    </div>
    <div style="display: flex;padding-left: 2px;">

      <div style="height:calc(100vh - 100px); overflow: auto;">
        <div  style="width: 80px;background-color:#fff;height:calc(100vh - 133px); ">
          <div
              style="text-align:center;padding: 12px 0;font-size:14px;"
              :class="[searchModel.goodCatId===null?'active':'']"
              @click="choseCat(null)">
            <div class="line">
              全部
            </div>
          </div>
          <div
              style="text-align:center;padding: 12px 0;font-size:14px;"
              :class="[searchModel.goodCatId===item.id?'active':'']"
              v-for="(item,index) in state.catList" :key="index" @click="choseCat(item.id)"
          >
            <div class="line">
              {{item.name}}
            </div>
          </div>
        </div>
      </div>
      <div style="height:calc(100vh - 100px); overflow: auto;">
        <fresh-load @action="action" url="app/getGoods" :search-model="searchModel" ref="freshRef">
          <div class="item" v-for="(item,index) in state.list" :key="index" @click="editGood(item)">
            <div class="name">{{ item.name }}</div>
            <div class="link">
              <div>规格：1 * {{ item.spec }}</div>
            </div>
            <div style="margin-top: 20px;">
              <nut-space>
                <div>单位：{{ item.unit1 }}</div>
                <div>大条码：{{ item.barCode }}</div>
                <div>小条码：{{ item.barCode1 }}</div>
              </nut-space>
            </div>
          </div>
        </fresh-load>
      </div>
    </div>
  </div>
</template>
<script setup>
// 商品管理
import tool from "@/utils/tool";
import {useGlobal} from "@/stores/useGlobal";
const global = useGlobal()
import FreshLoad from "@/components/freshLoad.vue";
import {computed, onBeforeMount, reactive, ref} from "vue";
import {useRouter} from "vue-router";
const props = defineProps({
  buId: {type: [Number, String], default: 0},
  buName: {type: [Number, String], default: ''},
})
const router = useRouter()
const freshRef = ref(null)
const addRef = ref(null)
const state = reactive({
  active: 0,
  list: [],
  total: 0,
  catList: [],
  value: '',
  title: '',
  showForm: false,
})
const searchModel = reactive({
  searchTxt: '',
  goodCatId: null,
  buId: props.buId
})

const height = computed(() => {
  return window.innerHeight - 131
})
const toolbarHei = computed(() => {
  return global.statusBarHeight
})
onBeforeMount(() => {
  getGoodCat()
})
const clickLeft = () => {
  router.go(-1)
}
const change = () => {

}
const saved = () => {
  searchModel.searchTxt = ''
  getList()
}
const focusOnField = (field) => {
  state.focusField = field
}
const closeForm = () => {
  state.showForm = false
}
const add = () => {
  router.push({name: 'addgood'})
}
const editGood = (item) => {
  router.push({name: 'addgood',query:{good: JSON.stringify(item)}})
}
const onSearch = () => {
  getList()
}
const action = (arr) => {
  state.list = arr
}
const choseCat = (id) => {
  searchModel.goodCatId = id
  getList()
}
const getGoodCat = () => {
  tool.post('app/getGoodCat').then(ret => {
    if(ret.stat) {
      state.catList = ret.data
    }
  })
}
const scanRet = (code) => {
  if(code) {
    state.active = 0
    searchModel.goodCatId = null
    tool.post('app/getGoodByBar', {code: code}, true).then(ret => {
      state.list = ret.data.list
    })
  }
}
const search = () => {
  state.active = 0
  searchModel.goodCatId = null
  getList()
}
const getList = () => {
  freshRef.value.getList()
}
const addCart = (goods) => {
  addRef.value.openDia(goods)
}

</script>
<style scoped lang="scss">
.active {
  background-color:rgba(0,0,0,0.05);
  .line {
    border-left:3px solid red;
  }
}
.item {
  margin:7px 5px 0 5px;
  background-color: white;
  padding: 10px;
  border-radius: 6px;
  .name {
    font-size: 15px;
    font-weight: 500;
    color: #6b6d71;
  }
  .link {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #6b6d71;
    display: flex;
  }
  .address {
    margin-top: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #6b6d71;
  }
  &:active {
    background-color: rgba(0,0,0,0.03);
  }
}


</style>